<%@  language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->
<!-- #include file="adovbs.inc" -->
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
    <title>Photos Albums</title>
    <link href="MainCSS.css" rel="stylesheet" type="text/css" />
    <link href="demo.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

/************************ pop up a division ************************/
function openPopup_click(divName,divWidth)
{
  var table = document.getElementById("filelist");
  while(table.firstChild)table.removeChild(table.firstChild);
  var btn = document.getElementById("AddNewPhotos");
  btn.style.visibility = "hidden";
		  
  var mainShade = document.getElementById("oFilterDIV");
  mainShade.style.height = "99%";
  var UploaderDiv = document.getElementById(divName);   

  // Finding the current cordinate (x,y) of the top-left corner of the screen after user scroll it.
  var scrOfX = 0, scrOfY = 0; // define the current x, y offset of the screen.
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant   
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;

  }
  
  // end of finding the current cordinate (x,y).
  
    var top = scrOfY + 50; 
    var left = (screen.width - divWidth) / 2;
    top += "px";
    left += "px";
    mainShade.style.visibility = "visible";
    UploaderDiv.style.left = left;
    UploaderDiv.style.top = top;
    UploaderDiv.style.visibility = "visible";
}

function openMessage_click(divName,divWidth)
{
  //ShowPhotos(i_albumid, s_username);

  var mainShade = document.getElementById("oFilterMessageDIV");
  mainShade.style.height = "100%";
  var UploaderDiv = document.getElementById(divName);   

  // Finding the current cordinate (x,y) of the top-left corner of the screen after user scroll it.
  var scrOfX = 0, scrOfY = 0; // define the current x, y offset of the screen.
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant   
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;

  }
  
  // end of finding the current cordinate (x,y).
  
    var top = scrOfY + 200; 
    var left = (screen.width - divWidth) / 2;
    top += "px";
    left += "px";
    mainShade.style.visibility = "visible";
    UploaderDiv.style.left = left;
    UploaderDiv.style.top = top;
    UploaderDiv.style.visibility = "visible";
}

function closePopup_click(divName)
{
    bpopup="0";
    var mainShade = document.getElementById("oFilterDIV");
    var UploaderDiv = document.getElementById(divName);    
    mainShade.style.visibility = "hidden";
    mainShade.style.height = "760px";
    UploaderDiv.style.visibility = "hidden";
    var btn = document.getElementById("AddNewPhotos");
    btn.style.visibility = "hidden";
    // NGUYENPTV edited at 23/NOV/2010
    window.close();
}

function closeMessage_click(divName)
{
    bpopup="0";
    var mainShade = document.getElementById("oFilterMessageDIV");
    var UploaderDiv = document.getElementById(divName);    
    mainShade.style.visibility = "hidden";
    mainShade.style.height = "760px";
    UploaderDiv.style.visibility = "hidden";
}
function getScrollY() {
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
  }
  return scrOfY;
}

function getScrollX() {
  var scrOfX = 0;
  if( typeof( window.pageXOffset ) == 'number' ) {
    //Netscape compliant
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfX = document.documentElement.scrollLeft;
  }
  return scrOfX;
}
/**************************** end of pop up a division ***********************/

/********************************Common functions ****************************/
	function gup( name ){ 
		    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
			var regexS = "[\\?&]"+name+"=([^&#]*)";  
			var regex = new RegExp( regexS );  
			var results = regex.exec( window.location.href );  
			if( results == null )    return "";  
			else    return results[1];
			}

/********************************End Common functions ************************/

	
/************************************Uploader *******************************/
	
	    var handlerurl='ajax-handler.asp'
		var i_albumid=gup( 'ai' );
		var s_albumname;// = "Album 4";//gup( 'an' );
		var s_username = gup( 'u' );
		var fileArray=[];
		
	

		function CreateAjaxRequest()
		{
			var xh;
			if (window.XMLHttpRequest)
				xh = new window.XMLHttpRequest();
			else
				xh = new ActiveXObject("Microsoft.XMLHTTP");
			
			xh.open("POST", handlerurl, false, null, null);
			xh.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
			return xh;
		}

	function ShowAttachmentsTable()
	{
		var table = document.getElementById("filelist");
		while(table.firstChild)table.removeChild(table.firstChild);
		
		AppendToFileList(fileArray);
		
	}
	function AppendToFileList(list)
	{
		var table = document.getElementById("filelist");
		
		var btn = document.getElementById("AddNewPhotos");
		if (fileArray.length > 0){
		 btn.style.visibility = "visible";
		}
		else btn.style.visibility = "hidden";
		
		for (var i = 0; i < list.length; i++)
		{
			var item = list[i];
			var row=table.insertRow(-1);
			row.setAttribute("fileguid",item.FileGuid);
			row.setAttribute("filename",item.FileName);
			var td1=row.insertCell(-1);
			td1.innerHTML="<img src='aspuploader/resources/circle.png' border='0'/>";
			var td2=row.insertCell(-1);
			td2.innerHTML=item.FileName;
			var td4=row.insertCell(-1);
			
			td4.innerHTML="[<a href='javascript:void(0)' onclick='Attachment_Remove(this)'>remove</a>]";
		}
		
		
	}
	
	function Attachment_FindRow(element)
	{
		while(true)
		{
			if(element.nodeName=="TR")
				return element;
			element=element.parentNode;
		}
	}

	function Attachment_Remove(link)
	{
		var row=Attachment_FindRow(link);
		if(!confirm("Are you sure you want to delete '"+row.getAttribute("filename")+"'?"))
			return;
		
		var guid=row.getAttribute("fileguid");
		
		var xh=CreateAjaxRequest();
		xh.send("delete=" + guid);

		var table = document.getElementById("filelist");
		table.deleteRow(row.rowIndex);
		
		for(var i=0;i<fileArray.length;i++)
		{
			if(fileArray[i].FileGuid==guid)
			{
				fileArray.splice(i,1);
				break;
			}
		}
		
		var btn = document.getElementById("AddNewPhotos");
		if (fileArray.length > 0){
		 btn.style.visibility = "visible";
		}
		else btn.style.visibility = "hidden";
		
	}
	function CuteWebUI_AjaxUploader_OnPostback()
	{
		
		var uploader = document.getElementById("myuploader");
		var guidlist = uploader.value;
		
		var xh=CreateAjaxRequest();
		//xh.send("guidlist=" + s_username + "/" + i_albumid + "/" + guidlist);
        xh.send("guidlist=" + guidlist);
		//call uploader to clear the client state
		openMessage_click("MessageDiv", 260);
		uploader.reset();

		if (xh.status != 200)
		{
			alert("http error " + xh.status);
			setTimeout(function() { document.write(xh.responseText); }, 10);
			return;
		}
		
		
		var list = eval(xh.responseText); //get JSON objects
		
		fileArray=fileArray.concat(list);
		

		AppendToFileList(list);

	}

	function ShowFiles()
	{
		var msgs=[];
		for(var i=0;i<fileArray.length;i++)
		{
			msgs.push(fileArray[i].FileName);
		}
		alert(msgs.join("\r\n"));
	}
	
	function ConvertArrToStr(arr)
	{
		var msgs=[];
		for(var i=0;i<arr.length;i++)
		{
			msgs.push(arr[i].FileGuid);
		}
		return msgs.join("$");
	}
	
	function AddFilesToDB()
	{
	
		var xh=CreateAjaxRequest();
		
		
        xh.send("AddFilesToDB=" + s_username + "/" + i_albumid + "/" + ConvertArrToStr(fileArray));
	
		if (xh.status != 200)
		{
			alert("http error " + xh.status);
			setTimeout(function() { document.write(xh.responseText); }, 10);
			return;
		}
		
		alert("Add New Photo(s) To Your Album completely");
		closePopup_click('UploaderDiv');
		
	}
	//Vu TRAN
	function addPhoto(str)
	{

		
		var xh=CreateAjaxRequest();
		xh.send("addPhoto="+str);
	
	}
	
	function CuteWebUI_AjaxUploader_OnTaskComplete(task)
	{
		//addPhoto( s_username + "/" + task.FileName + "/" + i_albumid );
		
		
		//alert("Update Complete!");
		
	}

    function ShowPhotos(albumID, s_uname)
	{
		var table = document.getElementById("filelist");
		
		while(table.firstChild)table.removeChild(table.firstChild);
		
		//var myuploaderButton = document.getElementById("myuploaderButton");
		
			
	
		if (albumID!='-1'){
			//myuploaderButton.disabled =false;
			
			
			var xh=CreateAjaxRequest();
			
			xh.send("ShowPhotos=" + s_uname + "/" + albumID);
	
			
	
			if (xh.status != 200)
			{
				alert("http error " + xh.status);
				setTimeout(function() { document.write(xh.responseText); }, 10);
				return;
			}
	
			var list = eval(xh.responseText); //get JSON objects
			
			fileArray=fileArray.concat(list);
	
			AppendToFileList(list);
			
		
		}
		else{
			//myuploaderButton.disabled =true; 	
			var table = document.getElementById("filelist");
			while(table.firstChild)table.removeChild(table.firstChild);
		}
		return true;
	}
	
	function OnChange(dropdown)
	{
		var newalbumname = document.getElementById("newalbumname");
				
		var myindex  = dropdown.selectedIndex
		
		i_albumid=dropdown.options[myindex].value
		
		var table = document.getElementById("filelist");
		while(table.firstChild)table.removeChild(table.firstChild);
		
		
	
		if (i_albumid != '-1'){
		    newalbumname.disabled =true;
			//myuploaderButton.disabled =false;
			var xh=CreateAjaxRequest();
			
			xh.send("OnChange=" + s_username + "/" + i_albumid);
	
			
	
			if (xh.status != 200)
			{
				alert("http error " + xh.status);
				setTimeout(function() { document.write(xh.responseText); }, 10);
				return;
			}
			
			if (xh.responseText != "nothing"){
			var list = eval(xh.responseText); //get JSON objects
			
			fileArray=fileArray.concat(list);
	
			AppendToFileList(list);
			}
			else while(table.firstChild)table.removeChild(table.firstChild);
			
			
		
		}
		else{  
		//myuploaderButton.disabled =true;
		newalbumname.disabled =false;
		while(table.firstChild)table.removeChild(table.firstChild);
		}
		return true;
	}

	
	function showDropDownList(s_uname)
		{
			if (s_uname != ''){
				
				var xh=CreateAjaxRequest();
				
				xh.send("showDropDownList=" + s_uname);
		
				if (xh.status != 200)
				{
					alert("http error " + xh.status);
					setTimeout(function() { document.write(xh.responseText); }, 10);
					return;
				}
				document.write(xh.responseText); //get JSON objects
			}
			return true;
		}

/**************************** end of uploader ***********************/
	
    </script>

    <script type="text/javascript">
        function getPhotos(albumID, userName, div) {
            populatePhotos(albumID, userName, div);
        }
    </script>

    <script type="text/javascript" src="MainJS.js"></script>

    
</head>
<body onload="openPopup_click('UploaderDiv',800);">
    <!--***Vu Tran***-->
    <div style="position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha( Opacity=60);
        width: 101%; background: black; height: 100%; visibility: hidden; top: 2px; left: 0px; z-index: 5;"
        id="oFilterDIV">
    </div>
    <div style="position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha( Opacity=60);
        width: 101%; background: black; height: 100%; visibility: hidden; top: 2px; left: 0px; z-index: 7;"
        id="oFilterMessageDIV">
    </div>
      <!--************************** Message **********************-->  
                <div id="MessageDiv" style="position: absolute; top: 300px; left: 100px; visibility: hidden;
                    width: 200px; height: 50px; background: black; z-index: 8;">
                    <div style="text-align: center;width: 200px;border:solid 5px #CBCAC6;background-color:#f9f9f9;padding: 20px 20px 20px 20px; font-family:Segoe UI, Arial,Verdana,Helvetica,sans-serif;
font-size: 80%;margin: 0 auto;">
                    <table>
                        <tr>
                            <td >
                                
                                            Upload Complete!
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align =center>
                                        <br />
                                        
                                            <input type="button" value="Continue" onclick="closeMessage_click('MessageDiv');" />
                                       
                            </td>
                        </tr>
                    </table>
                    </div>
                </div>
   <!--**************************End Message **********************-->  

            <div style="width: 100%; height: 100%; background: gray; ">
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <br />
                                <input type='button' value='Add New Album' onclick="openPopup_click('UploaderDiv',800);"/>
            </div>                
                 
                
                          <!--**************************Uploader popup **********************-->
                <div id="UploaderDiv" style="position: absolute; top: 20px; left: 100px; visibility: hidden;
                    width: 700px; height: 260px; background: black; z-index: 6;">
                    <table align="center" bgcolor="white" style="width: 100%" cellpadding="2px">
                        <tr>
                            <td style="color: white; background: black; font-family: arial; font-size: 12px;
                                font-weight: bold; text-align: center">
                                <table align="center" bgcolor="#CCCCCC" style="width: 100%">
                                    <tr>
                                        <td colspan="2" style="color: white; background: blue; font-family: arial; font-size: 12px;
                                            font-weight: bold; width: 100%; height: 25px">
                                            Upload Photos
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="40%">
                                            <table id="filelist" style='border-collapse: collapse' class='Grid' border='0' cellspacing='0'
                                                cellpadding='2'>
                                            </table>
                                                <%

	                                        Dim uploader
	                                        Set uploader=new AspUploader
	                                        uploader.MaxSizeKB=10240
	                                        uploader.Name="myuploader"
	                                        uploader.MultipleFilesUpload=true
	                                        uploader.InsertText="Upload Photos"
	                                        uploader.AllowedFileExtensions="*.jpg,*.png,*.gif"
                                        	
                                        	uploader.ShowProgressBar=true 
                                            uploader.ShowProgressInfo=true 

	                                        uploader.InsertButtonID="uploadbutton"
	                                        uploader.ProgressCtrlID="uploaderprogresspanel"
	                                        uploader.ProgressTextID="uploaderprogresstext"
	                                        uploader.CancelButtonID="uploadercancelbutton"
                                        	
	

                                            %>
                                            <%=uploader.GetString() %>
                                            
				                            <div id="uploaderprogresspanel" style='display:none;background-color:#CCCCCC;border:dashed 2px gray;padding:4px;' BorderColor="Orange" BorderStyle="dashed">
					                                <span id="uploaderprogresstext" style='color:firebrick'></span>
				                            </div>
                                				
				                            <input type="button" id="uploadercancelbutton" name="uploadercancelbutton" value="Cancel"/>
                                				
                                            	
                                            <input type="button" id = "AddNewPhotos" name = "AddNewPhotos" value="[Add New Photo(s) To Your Album?]" onclick="AddFilesToDB();" />
                                            
                                        </td>
                                        <td width="60%">
                                         
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <b><font size="2">Uploading Tip</font></b><br />
                                            <br />
                                            <span style="font-size: 9pt">You can select multiples photos in the dialog by holding
                                                the 'ctrl' key down while clicking on the photo.</span><br />
                                            <br />
                                            <span style="font-size: 9pt">Trouble uploading photos?</span> <font color="#0000FF">
                                                <span style="font-size: 9pt">Try the Simple Uploader</span></font><br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                           
                                            <p>
                                            
                                            
                                         
                                        </td>
                                    </tr>
                                    <tr bgcolor="#999999">
                                        <td colspan="2" width="80%" align="right">
                                        
	                                        <input type="button" id="uploadbutton" value = "Upload Photos"/>
                                            <input type="button" value="Close" onclick="closePopup_click('UploaderDiv');" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>

    


    <!--**************************End Uploader popup **********************-->
  
</body>
</html>
